<template>
	<div class="tuiJian">
		<div class="title center flex-start tuijianShiPin">
			<img src="@/assets/image/zhuTi/tuishi.png" alt="" />
			<div class="f16 ctheme fbold">推荐视频</div>
		</div>
		<div class="recommendVideo" v-for="item in list" :key="item.id">
			<div class="recommendVideo-img">
				<img
					:src="item.cover"
					alt=""
					@click="router.push(`/videoDetails?id=${item.id}&swId=${item.swId}`)"
					class="cesi"
				/>
				<div
					class="state center posa cfff f14"
					@click="router.push(`/videoDetails?id=${item.id}&swId=${item.swId}`)"
					v-if="item.status == 1"
				>
					发布
				</div>
				<div
					class="state center posa cfff f14"
					@click="router.push(`/videoDetails?id=${item.id}&swId=${item.swId}`)"
					v-else
				>
					未发布
				</div>
				<img
					src="@/assets/image/zhuTi/bo.png"
					@click="router.push(`/videoDetails?id=${item.id}&swId=${item.swId}`)"
					class="posa bo"
					alt=""
				/>
			</div>
			<div class="recommendVideo-title">
				{{ item.title }}
			</div>
			<div class="recommendVideo-text f14">
				<div>发布人：{{ item.authName }}</div>
				<div>
					{{ times(item.pubTime) }}
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
const { proxy } = getCurrentInstance()
const route = useRoute()
const router = useRouter()
const list = ref([])
async function created() {
	const res = await getAxios(`/knowledge/kbVideo/randVideoList`)
	list.value = res
}
created()
function times(time) {
	return time.substring(0, 10)
}
</script>
<style lang="scss" scoped>
@import "/style/basis";
.tuiJian {
	width: 250px;
	background: #ffffff;
	border-radius: 3px;
	margin-left: 10px;
	margin-bottom: 15px;
	padding-bottom: 17px;
	@include maxWidth(1400) {
		width: 200px;
	}
	:deep(.shiPin .line2) {
		padding: 15px 4px;
	}
	:deep(.shiPin .cover) {
		height: 140px;

		:deep(.shiPin) {
			margin: 0 auto;
		}

		.box {
			padding: 15px 20px 0;

			.circle {
				width: 5px;
				height: 5px;
				background: #dddfe6;
				border-radius: 50%;
				margin-right: 10px;
			}
		}

		.title {
			padding: 14px 25px;
			background: #eaf1ff;
			margin-bottom: 18px;
			img {
				width: 18px;
				margin-right: 10px;
			}
		}
	}
	.recommendVideo {
		width: 250px;
		cursor: pointer;
		padding-inline: 15px;
		margin-bottom: 15px;
		@include maxWidth(1400) {
			width: 200px;
		}
		.recommendVideo-img {
			position: relative;
			width: 95%;
			height: 130px;
			object-fit: cover;
			margin-bottom: 5px;
			img {
				border-radius: 10px;
				width: 100%;
				height: 100%;
				aspect-ratio: 1.5 / 1;
				object-fit: inherit;
			}
			.state {
				width: 50px;
				height: 20px;
				background: #ff952c;
				border-radius: 0 10px 0 10px;
				top: 0;
				right: 0;
			}
			.bo {
				width: 40px;
				height: 25px;
				left: 15px;
				bottom: 15px;
			}
		}
		.recommendVideo-title {
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.recommendVideo-text {
			display: flex;
			justify-content: space-between;
			color: #606266;
			div {
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
	}
	.tuijianShiPin {
		padding: 20px;
		img {
			width: 20px;
			margin-right: 10px;
		}
	}
}
</style>
